<script setup>
import { ref } from 'vue'
import { requireImg } from '@/utils/common'
const hlist = ref([
  {
    name: '直升机',
    img: requireImg('infrastructure/zsj.png')
  },
  {
    name: '滑翔伞',
    img: requireImg('infrastructure/hxs.png')
  },
  {
    name: '无人机',
    img: requireImg('infrastructure/wrj.png')
  },
  {
    name: '鸟类',
    img: requireImg('infrastructure/bird.png')
  }
])
</script>
<template>
  <div class="hbox">
    <p v-for="(item, index) in hlist" :key="index">
      <img :src="item.img" alt="" />
      <span>{{ item.name }}</span>
    </p>
  </div>
</template>
<style scoped lang="scss">
.hbox {
  position: absolute;
  right: 380px;
  bottom: 30px;
  padding: 10px 15px 10px 10px;
  background: url('@img/management/legend_bg02.png');
  background-size: 100% 100%;

  p {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    color: #b3d9ff;
    font-size: 18px;
    font-weight: 300;

    img {
      width: 20px;
      height: 20px;
      margin-top: 2px;
    }

    span {
      margin-left: 10px;
    }
  }
}
</style>
